<template>
	<view style="min-height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar title='工作台'  left-icon-color="white" :titleStyle="{'color':'white'}" bgColor="transparent" :autoBack="true" 
			:placeholder="true"></u-navbar>
		<image
			src="https://renovationcdn.jiachuangnet.com/index/indexBg.png"
			class='bg' style=""></image>
		<view class="container">
			<view class="floor flex" style="flex-wrap: wrap;justify-content: space-around;">
				<view class="workItem" @click="toPathC('oLineAssessment/index?patrolType=2')">
					<image src="https://renovationcdn.jiachuangnet.com/details/work5.png" mode=""  style="width: 60rpx;height: 60rpx;margin-bottom: 20rpx;"></image>
					<!-- <u-icon name="tags" color="#13989a" size="28"></u-icon> -->
					<text>线下考评</text>
				</view>
				<view class="workItem"  @click="toPathC('spotChecks/index')">
					<image src="https://renovationcdn.jiachuangnet.com/details/work4.png" mode="" style="width: 60rpx;height: 60rpx;margin-bottom: 20rpx;"></image>
					<text>线下点检</text>
				</view>
				<view class="workItem"  @click="toPathC('oLineAssessment/index?patrolType=1')">
					<image src="https://renovationcdn.jiachuangnet.com/details/work3.png" mode=""  style="width: 60rpx;height: 60rpx;margin-bottom: 20rpx;"></image>
					<text>线上考评</text>
				</view>
				<view class="workItem"  @click="toPathC('pictureCheck/index')">
					<image src="https://renovationcdn.jiachuangnet.com/details/work2.png" mode=""  style="width: 60rpx;height: 60rpx;margin-bottom: 20rpx;"></image>
					<text>图片点检</text>
				</view>
				<view class="workItem"  @click="toPathHistory">
					<image src="https://renovationcdn.jiachuangnet.com/details/wokr1.png" mode=""  style="width: 60rpx;height: 60rpx;margin-bottom: 20rpx;"></image>
					<text>巡查记录</text>
				</view>
			</view>
			<view class="floor">
				<view class="title">
					我的待办
				</view>
				<view style="display: flex; flex-wrap: wrap;justify-content: space-around;">
					<view class="workItem" @click="toPathC('todo/index')">
						<text style="color: #f25f41;font-size: 30rpx;">{{toDoCount||0}}</text>
						<text>待办整改</text>
					</view>
					<view style="height: 50rpx;width: 1rpx;background-color: #f3f3f3;">
						
					</view>
					<view class="workItem" @click="toPathC('todo/task')">
						<text style="color: #f25f41;font-size: 30rpx;">{{taskCount||0}}</text>
						<text>待办任务</text>
					</view>
					<!-- <view style="height: 50rpx;width: 1rpx;background-color: #f3f3f3;">
						
					</view>
					<view class="workItem">
						<text style="color: #f25f41;font-size: 30rpx;">5</text>
						<text>其他</text>
					</view> -->
				</view>
			</view>
			<view class="floor" v-for="(item,index) in patrolStoreVoList" :key="index">
				<view class="title" style="margin-bottom: 20rpx;">
					{{item.assignName}}
				</view>
				<view>
					<video :autoplay="true" :id="'myVideo'+'i'" v-if='item.videoUrl && item.showRealVideo' :src="item.videoUrl" style="width: 100%;height: 395rpx;"></video>
					 <!-- 伪装播放按钮（未加载时显示） -->
					<view v-if="item.videoUrl && !item.showRealVideo" style="width: 100%;height: 305rpx;background-color: #eee;display: flex;justify-content: center;align-items: center;" @click="initVideo(index)">
					  <view class="play-icon" style="font-size: 40rpx;color: #333;">▶</view>
					</view>
					<view v-if="!item.videoUrl">
						<image src='https://renovationcdn.jiachuangnet.com/novideo.jpg'  style="width: 100%;height: 305rpx"></image>
						<view style="text-align: center;height: 90rpx;line-height: 90rpx;color:#e6e6e6">当前店铺暂无实时画面</view>
					</view>
					<view class="flex" style="justify-content: space-between;padding: 30rpx 20rpx;font-size: 32rpx;font-weight: 700;;border-top:0.5px solid #eee;" @click="gotoVideo(item.assignTaskId)">
						<view style="font-weight: 500;font-size: 30rpx;">
							{{item.serialNumber||'暂无摄像头'}}
						</view>
						<view style="font-weight: 500;font-size: 28rpx;color: #378ffb;">
							查看更多>>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import formItem from '../../../uni_modules/uview-ui/libs/config/props/formItem'

	export default {
		data(){
			return{
				patrolStoreVoList:[],
				toDoCount:0,
				taskCount:0,
				pageNumber:1
			}
		},
		onReachBottom() {
			this.pageNumber++
			this.getPatrolStoreVo()
		},
		onShow() {
			this.patrolStoreVoList=[]
			this.pageNumber=1
			this.getPatrolStoreVo()
			this.getTodoCount()
			this.getInspectionTaskCount()
		},
		methods:{
			gotoVideo(assignTaskId){
				uni.navigateTo({
					url: `/packageC/pages/videoCapture/index?flag=1&assignTaskId=${assignTaskId}`
				})
			},
			getInspectionTaskCount(){
				uni.$u.http.get('/inspectionTask/getInspectionTaskCount').then(res=>{
					this.taskCount=res
				})
			},
			getTodoCount(){
				uni.$u.http.post('/patrol/getTodoCount', {
					
				}).then(res=>{
					this.toDoCount=res
				})
			},
			initVideo(i){
				this.patrolStoreVoList[i].showRealVideo=true
			},
			toPathC(url){
				uni.navigateTo({
					url: `/packageC/pages/${url}`
				})
			},
			toPathHistory(){
				if(this.patrolStoreVoList.length<=0){
					return uni.$u.toast('当前无店铺，无法查看巡查记录 :)');
				}
				uni.navigateTo({
					url: `/packageC/pages/log/history?assignTaskId=${this.patrolStoreVoList[0].assignTaskId}&assignName=${this.patrolStoreVoList[0].assignName}`
				})
			},
			getPatrolStoreVo(){
				uni.$u.http.post('/patrol/getPatrolStoreVo', {
					pageNumber:this.pageNumber,
					pageSize:3,
				}).then(res=>{
					Promise.resolve().then(()=>{
						res.data.forEach(item=>{
							item.showRealVideo=false
							uni.$u.http.get('/patrol/getStoreAllCamera', {
								params:{
									assignTaskId:item.assignTaskId,
								}
							}).then(res=>{
								if(res){
									let flag= res.some(v=>{
										if(v.videoUrl){
											item.serialNumber=v.serialNumber
											item.videoUrl=v.videoUrl
											return true
										}
									})
									if(!flag){
										item.serialNumber=''
										item.videoUrl=''
									}
								}
							})
						})
						
						return Promise.resolve(res)
					}).then((res)=>{
						console.log(res)
						this.patrolStoreVoList=[...this.patrolStoreVoList,...res.data]
					})
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 92vw;
		padding: 30rpx;
		z-index: 10;
		position: absolute;
		top: 320rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}
	.bg {
		width: 750rpx;
		height: 430rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.workItem{
		font-size: 24rpx;
		width: 100rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.floor{
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.title{
			font-weight: 600;
			font-size: 30rpx;
		}
	}
	
</style>